<template>
  <div class="pickers">
    <vuePickers :data="pickData"
      @cancel="cancel"
      @confirm="confirm"
      :showToolbar="true"
      :maskClick="false"
      :visible.sync="pickerVisible"
    />
    <ul class="form">
      <li class="item-form">
        <div class="item-top">
          <img class="item-img" src="/static/images/grade.png" alt="">目前所在年级  Grade
        </div>
        <div class="item-fill">
          <input type="text" :placeholder="result">
        </div>
        <img class="item-fill-img" src="/static/images/down.png" @click="pickerVisible = true">
      </li>
    </ul>
    
  </div>
</template>
<script>
import vuePickers from 'vue-pickers'
export default {
  components: { vuePickers },
  data () {
    let tdata = []
    let value = ['一年级 Grade 1','二年级 Grade 2','三年级 Grade 3','四年级 Grade 4','五年级 Grade 5','六年级 Grade 6','初一 Grade 7','初二 Grade 8','初三 Grade 9']
    for (let i = 0; i < value.length; i++) {
      tdata.push({
        label: `${value[i]}`
      })
    }
    return {
      pickerVisible: false,
      pickData: [ tdata ],
      result: '请选择目前所在年级 Please select the grade'
    }
  },
  methods: {
    cancel () {
      return
    },
    confirm (res) {
      this.result = res[0].label
    }
  }
}
</script>
<style lang="less">
  .pickers{
    .form{
      margin-top: 0;
      .item-form{
        // border-top: none;
        border-bottom: 1px solid #ccc;
      }
    }
  }
  
</style>